import { useState } from 'react'
import { Button, Checkbox, Form, Input, message } from 'antd'
import { usernameRule, passwordRule } from '@/validator/loginValidate'
import userModel from '@/models/userModel'
import { useHistory } from 'react-router-dom'

const LoginForm = () => {
  const history = useHistory()
  // 状态
  // let [loading, setLoading] = useState(false)
  let [loading, setLoading] = useState(() => false)
  // 通过此hook得到当前Form表单的实例
  const [form] = Form.useForm()

  // 表单验证成功事件
  const onFinish = async values => {
    setLoading(true)
    // console.log('Success:', values)
    let ret = await userModel.login(values)
    setLoading(false)
    // 跳转
    history.push('/admin')
    console.log(ret)
  }

  // 表单验证失败事件
  const onFinishFailed = errorInfo => {
    setLoading(true)
    // console.log('Failed:', errorInfo)
    // console.log('失败')
    message.error({
      content: '表单数据不完整',
      duration: 2,
      onClose: () => setLoading(false)
    })
  }

  return (
    <Form
      form={form}
      initialValues={{ remember: true }}
      // 标签占用的栏数
      labelCol={{
        span: 6
      }}
      // 表单项占用的栏数
      wrapperCol={{
        span: 14
      }}
      autoComplete="off"
      // 表单验证成功后，会触发的事件
      onFinish={onFinish}
      // 表单验证失败后，会触发事件
      onFinishFailed={onFinishFailed}
    >
      <Form.Item
        label="账号："
        // 用户表单数据接受时的属性名称
        name="username"
        // 表单项验证
        rules={usernameRule()}
      >
        {/* 如果Input写在Form.Item组件子元素，而且Item它还设置了name属性,则input无需管理 */}
        <Input placeholder="请输入有效的账号信息" />
      </Form.Item>

      <Form.Item label="密码：" name="password" rules={passwordRule()}>
        <Input placeholder="请输入有效的密码信息" />
        {/* <Input.Password /> */}
      </Form.Item>

      <Form.Item
        name="remember"
        valuePropName="checked"
        wrapperCol={{
          offset: 6,
          span: 14
        }}
      >
        <Checkbox>记住我</Checkbox>
      </Form.Item>

      <Form.Item
        wrapperCol={{
          offset: 6,
          span: 14
        }}
      >
        <Button type="primary" htmlType="submit" loading={loading}>
          进入后台
        </Button>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <Button
          type="default"
          onClick={() => {
            form.resetFields()
          }}
        >
          重置表单
        </Button>
      </Form.Item>
    </Form>
  )
}

export default LoginForm
